<template>
  <div class="content-detail">
    <back-bar title="房源详情" @toBack="toBack" />
    <detail-swiper :imgList="imgList" />
    <detail-info :detailInfo="detailInfo" :baseFaclity="baseFaclity" />
    <house-comment />
    <parcel-content title="热门房源" class="parcel-box">
      <house-item
        @todetail="todetail(item.id)"
        slot="houseItem"
        v-for="item of hotHouseList"
        :key="item.id"
        :houseItem="item"
        :imgPath="staticpath+item.images[0].path"
      >
        <span slot="title" class="houseItemtitle-box">{{item.region}}</span>
      </house-item>
    </parcel-content>
    <detail-bottom-bar
      :rentOutUserInfo="rentOutUserInfo"
      :rentOutUserRealName="rentOutUserRealName"
      :imgPath="imgPath"
      :id="id"
      :isCanToAppointment="isCanToAppointment"
    />
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import DetailSwiper from "./childcomps/DetailSwiper";
import DetailBottomBar from "./childcomps/DetailBottomBar";
import DetailInfo from "./childcomps/DetailInfo";
import HouseComment from "./childcomps/HouseComment";
import ParcelContent from "components/conten/parcelcontent/ParcelContent";
import HouseItem from "components/common/houseitem/HouseItem";

import { getHouseDetail } from "network/housedetail";
import { getHotHouseList } from "network/homePage";

import { mapState } from "vuex";

export default {
  name: "housedetail",
  components: {
    BackBar,
    DetailSwiper,
    DetailBottomBar,
    DetailInfo,
    HouseComment,
    ParcelContent,
    HouseItem,
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    todetail(houseId) {
      this.$router.push("/housedetail?houseId=" + houseId);
      this.$router.go(0);
    },
  },
  data() {
    return {
      imgList: [],
      detailInfo: {},
      baseFaclity: {},
      rentOutUserInfo: {},
      rentOutUserRealName: "",
      imgPath: "",
      id: "", //发布房源人的id
      isCanToAppointment: false, //是否能够预约
      hotHouseList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  created() {
    let houseId = this.$route.query.houseId;
    getHouseDetail(houseId).then((res) => {
      console.log(res);
      this.detailInfo = res.data;
      this.imgList = res.data.images;
      this.baseFaclity = res.data.devices;
      this.rentOutUserInfo = res.data.rentOutUser;
      this.rentOutUserRealName = res.data.rentOutUser.realName;
      this.imgPath = this.staticpath + res.data.rentOutUser.header;
      this.id = res.data.rentOutUser.id;
      if (this.id == this.userId) {
        this.isCanToAppointment = true;
      }
    });
    let city = this.city;
    getHotHouseList({ city }).then((res) => {
      console.log(res.data);
      this.hotHouseList = res.data;
    });
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
      city: (state) => state.moduleHotCity.city,
    }),
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
};
</script>

<style scoped>
.content-detail {
  padding-top: 50px;
  padding-bottom: 60px;
}
.parcel-box {
  padding: 0 5px;
}
</style>